<template>  
    <div class="input_wrap">
        <input  maxlength="3" @focus = "focusStyle($event)" @keyup="upnext($event)" @keydown="nextInput($event)" @blur = "testFormat('a',$event)" class="ip_input ip_a" type="text"> . 
        <input  maxlength="3" @focus = "focusStyle($event)" @keyup="upnext($event)" @keydown="nextInput($event)" @blur = "testFormat('b',$event)" class="ip_input ip_b" type="text"> . 
        <input  maxlength="3" @focus = "focusStyle($event)" @keyup="upnext($event)" @keydown="nextInput($event)" @blur = "testFormat('c',$event)" class="ip_input ip_c" type="text"> .
        <input  maxlength="3" @focus = "focusStyle($event)" @keyup="upnext($event)" @keydown="mgnextInput($event)" @blur = "testFormat('d',$event)" class="ip_input ip_d" type="text">/
        <input  maxlength="2" @focus = "focusStyle($event)" @blur = "testFormat('e',$event)" class="ip_input ip_e" type="text">
    </div>		
</template>
<script>
import formatTest from 'libs/formatTest'

export default {
     props:{
       empty:{
           type: Boolean,
		   required: true
       }
    },
    methods:{
        testFormat(type,event) {
            let parent = $(event.currentTarget).parent()
            let ip_a = parent.find(".ip_a").val()
            let ip_b = parent.find(".ip_b").val()
            let ip_c = parent.find(".ip_c").val()
            let ip_d = parent.find(".ip_d").val()
            let e = parent.find(".ip_e").val()
            let val = ip_a +"."+ip_b+"."+ip_c+"."+ip_d+"/"+e
            let reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)(\/(\d|[1-2]\d|3[0-2]))$/
            let conditions = false
            switch (type) {
                case 'a':
                    conditions =ip_b&&ip_c&&ip_d&&e?true:false
                    break;
                 case 'b':
                    conditions = ip_c&&ip_d&&e?true:false
                    break;
                 case 'c':
                    conditions = ip_d&&e?true:false
                    break;
                case 'd':
                    conditions = e?true:false
                    break;
                case 'e':
                    conditions = true
                    break;
                default:
                    break;
            }
            if (conditions) {
                if (reg.test(val)||(this.empty&&val===".../")) {
                    return true
                } else {
                    parent.addClass('error_foramt').addClass('animated shake')
                    setTimeout(()=> {
                        parent.removeClass('animated shake')
                    }, 200)
                    return false
                } 
            }   
		},
        nextInput(event) { 
             if (event.keyCode==69||event.keyCode==229) {
                 event.preventDefault()        
             } //不能输入字母e        
            if (event.keyCode==110||event.keyCode==190) {
               event.preventDefault()
               let val = $(event.currentTarget).val() 
               if (val) {
                   $(event.currentTarget).next().focus() 
                   $(event.currentTarget).next().select()
               }
            } 
            if (event.keyCode==39) {
               event.preventDefault()
               $(event.currentTarget).next().focus() 
               $(event.currentTarget).next().select()
            } 
            if (event.keyCode==37) {
                event.preventDefault()
               $(event.currentTarget).prev().focus()
               $(event.currentTarget).prev().select()    
            } 
        },
        mgnextInput() {
             if (event.keyCode==191) {
               event.preventDefault()
               $(event.currentTarget).next().focus()    
            }  
        },
        upnext(event) {
             if ($(event.currentTarget).val().length>3&&event.keyCode!=37&&event.keyCode!=39) {
                $(event.currentTarget).next().focus()   
                $(event.currentTarget).next().select()     
            }   
            if ($(event.currentTarget).val().length<=0&&event.keyCode==8) {
                event.preventDefault()
                $(event.currentTarget).prev().focus()  
                $(event.currentTarget).prev().select()      
            }
        },
       focusStyle(event) {
          let parent=  $(event.currentTarget).parent()
          parent.removeClass("error_foramt")
        }
    }
}

</script>
<style scoped>
    input{
		width: 36px;
		height: 100%;
		text-align: center;
		padding: 0;
	    color: #555;
        border: none; 
	}
	.input_wrap{
        display: inline-block;	
		width: 225px;
		height: 25px;
		border: 1px solid #e8e8e8;
		border-radius: 5px;
		box-sizing: border-box;
        color: #999;
	}
    .input_wrap input{
        border: none;
        outline: none;
    }
    input:focus{
        border: none;
        outline: none;
    }
    .error_foramt{
        border: 1px solid  #b63039;
    }
</style>